<template>
  <div class="login">
    <img src="@/assets/img/zhu.jpg" alt=""/>
    <div class="list">
      <div class="box-1">
        <div class="box-sms" :class="bottomSolid1?'active':''">
          <input type="tel" v-model="tel" @focus="bottomSolid1 = true" @blur="bottomSolid1 = false"
                 placeholder="请输入手机号"/>
          <span class="getsms" v-show="show" @click="sendSMS">{{ txt }}</span>
        </div>
        <div class="msm-password" :class="bottomSolid2?'active':''">
          <input type="text" v-model="sms" @focus="bottomSolid2 = true" @blur="bottomSolid2 = false" v-if="show"
                 placeholder="请输入短信验证码"/>
          <input type="password" v-model="password" @focus="bottomSolid2 = true" @blur="bottomSolid2 = false" v-else
                 placeholder="请使用密码登录"/>
        </div>
        <p class="p">
          <span @click="gotoForget">{{ texts }}</span>
          <span class="span" @click="text2" id="p2">{{ text }}</span>
        </p>
      </div>

      <div class="login-btn" @click="login">登录</div>
      <div class="input">
        <van-checkbox class="check" v-model="checked" checked-color="#ee0a24">
          我同意<span @click="$router.push('/registration')">用户注册协议</span>
          和<span @click="$router.push('/privacy')">隐私保护协议</span>
        </van-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import {sendSMS, Login} from "@/utils/api";
import {Toast} from 'vant';

export default {
  data() {
    return {
      checked: false,
      show: true,
      text: "使用密码登录",
      txt: '获取验证码',
      texts: "*未注册的手机号将自动注册",
      tel: '',//手机号
      sms: '',//短信
      bottomSolid1: false,//显示短信样式
      bottomSolid2: false,//显示密码框样式
      password: '',//密码
      num: 10,
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    text2() {
      this.show = !this.show;
      if (this.show === false) {
        this.text = "注册/验证码登录";
        this.texts = "找回密码";
      } else if (this.show === true) {
        this.text = "使用密码登录";
        this.texts = "*未注册的手机号将自动注册";
      }
    },
    sendSMS() {
      const phoneReg = /^(1[356789]|9[28])\d{9}$/;
      let obj = {
        mobile: this.tel,
        sms_type: "login"
      }
      if (!phoneReg.test(this.tel)) {//正则如果不成立
        Toast('请输入正确的手机号')
      } else {//正则如果成立
        //定时器
        let clock = setInterval(() => {
          if (this.num > 0) {
            // this.num--
            // console.log(this.num + "s后重新发送")
            this.txt = "获取验证码(" + this.num-- + ")"
            document.getElementById("p2").style.color = "rgb(204, 204, 204)";
          } else {
            window.clearInterval(clock)
            this.txt = "获取验证码"
            document.getElementById("p2").style.color = "#e60012";
          }
        }, 1000)
        //请求
        sendSMS(obj).then(res => {
          console.log(res.msg)
        })
        Toast('验证码已发送')
      }

    },
    login() {
      let obj = {
        mobile: this.tel,
        sms_code: this.sms,
        type: 2,
        client: 1
      }
      let obj2 = {
        mobile: this.tel,
        password: this.password,
        type: 1,
        client: 1
      }
      if (this.tel) {
        if (this.checked) {
          if (this.show) {
            if (this.sms) {
              Login(obj).then(res => {
                if (res.code === 201) {
                  Toast(res.msg)
                }
                Toast('登录成功')
                console.log(res)
                // localStorage.setItem('adminToken',res.data.remember_token)
                localStorage.setItem('userData', JSON.stringify(res.data))
                this.$store.state.token = res.data.remember_token
                localStorage.setItem('adminToken',this.$store.state.token)
                this.$router.push('/my')
                // console.log(res)
              })
            } else {
              Toast('请输入验证码')
            }
          } else {
            if (this.password) {
              Login(obj2).then(res => {
                // console.log(res)
                if (res.code === 201) {
                  Toast(res.msg)
                }else {
                  Toast('登录成功')
                }
                console.log(res)
                // localStorage.setItem('userData', JSON.stringify(res.data))
                this.$store.state.token = res.data.remember_token
                localStorage.setItem('adminToken',this.$store.state.token)
                this.$router.push('/my')
              })
            } else {
              Toast('请输入密码')
            }
          }
        } else {
          Toast('请阅读并勾选用户注册协议')
        }
      } else {
        Toast('请输入电话号码')
      }
    },
    gotoForget(){
      // alert(1)
      if(this.texts === '找回密码'){
        // alert(1)
        this.$router.push('/forget-pass')
      }
    }
  },
  components: {},
};
</script>

<style lang='scss' scoped>
//.login {
//  padding-bottom: 30px;
//}

img {
  width: 100%;
  height: 375px;
  margin-bottom: 10px;
}

.list {
  width: 100%;
  background-color: #ffffff;
  //padding-top: 40px;
  .box-1 {
    padding: 66px 40px 0 40px;
    //padding: 0 40px;
    width: 100%;
    //margin: 0 auto;
    font-size: 16px;

    .box-sms {
      display: flex;
      justify-content: space-between;

      .getsms {
        //display: flex;
        //align-items: center;
        //justify-content: center;
        font-size: 12px;
        color: #e60012;
        margin: 12.5px 5px 0 0;
        font-weight: 500;
      }
    }

    div {
      border-bottom: 1px solid #f1f1f1;
    }

    .active {
      border-bottom: 1px solid #e60012 !important;
    }

    input {
      width: 200px;
      //height: 20px;
      display: block;
      line-height: 20px;
      border: 0;
      padding: 13.6px 0;
    }

    input::-webkit-input-placeholder {
      color: #b7b7b7;
      font-size: 15px;
      font-weight: 500;
    }

    // span {
    //   margin-left: 40px;
    // }
    .msm-password {
      height: 50px;
      border-bottom: 1px solid #f1f1f1;
    }
  }

  .p {
    margin-top: 15px;
    //width: 100%;
    display: flex;
    justify-content: space-between;
    //margin: 20px auto;
    //padding-right: 13px;
    //   border: solid 1px;
    font-size: 12px;
    font-weight: 500;
    color: #b7b7b7;

    .span {
      color: #999;
    }
  }
}

.login-btn {
  width: 280px;
  height: 50px;
  margin: 40px auto !important;
  // border: solid 1px;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  background-image: linear-gradient(to right, #ec7f7f, #e60618);
  color: #fff;
  box-shadow: 0 10px 12px 6px rgba(250, 207, 211, 0.68);
  font-size: 16px;
  font-weight: 500;
}

.input {
  width: 80%;
  padding-bottom: 30px;
  margin: 0 auto !important;
  display: flex;

  span {
    color: red;
  }
}
</style>
